revision:
Syntax: $("*"); selects all elements
The * selector selects all elements in the document, including html, head and body.
If the * selector is used together with another element, it selects all child elements within the specified element.
Tip: The * selector can be heavy to process for some browsers.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divA">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divA *").css("background-color", "orange");
});
</script>
Syntax: $("#lastname"); selects the element with id="lastname"
The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element.
Note: The id attribute must be unique within a document. Also, do not start an id attribute with a number. It may cause problems in some browsers.
My name is Donald.
I live in Duckburg.
<div id="divB">
<h4>Welcome to My Homepage</h4>
<p id="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<script>
$(document).ready(function(){
$("#divB #intro").css("background-color", "yellow");
});
</script>
Syntax: $(".intro"); selects all elements with class="intro"
The .class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements.
Note: Do not start a class attribute with a number. It may cause problems in some browsers.
My name is Donald.
I live in Duckburg.
I live in Duckburg.
<div id="divC">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<div class="intro">My name is Dolly.</div>
<p>I live in Duckburg.</p>
</div>
<script>
$(document).ready(function(){
$("divC .intro").css("background-color","pink");
});
</script>
Syntax: $(".intro,.demo"); selects all elements with the class "intro" or "demo"
The .class selector can also be used to select multiple classes.
Note: seperate each class with a comma. Do not start a class attribute with a number. It may cause problems in some browsers.
This paragraph has class "intro".
This is a paragraph.
This paragraph has class "demo".
This is another paragraph.
This paragraph has class "end".
<div id="divD">
<h4>Welcome to My Homepage</h4>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="demo">This paragraph has class "demo".</p>
<p>This is another paragraph.</p>
<p class="end">This paragraph has class "end".</p>
</div>
<script>
$(document).ready(function(){
$("#divD .intro, #divD .demo").css("background-color", "orange");
$("#divD .end").css("color", "blue");
});
</script>
Syntax: $("p"); selects all <p> elements
The element selector selects all elements with the specific element name.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divE">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divE p").css("background-color", "pink");
});
</script>
Syntax: $("h1,div,p"); selects all <h1>, <div> and <p> elements
The element selector can also be used to select multiple elements. Seperate each element with a comma.
How are you?
I'm fine, thanks.
<div id="divF">
<h4>Welcome to My Web Page</h4>
<h5>Nice to meet you</h5>
<div>Very nice indeed.</div>
<p>How are you?</p>
<p>I'm fine, <span>thanks.</span></p>
</div>
<script>
$(document).ready(function(){
$("#divF h5, #divF div, #divF span").css("background-color", "yellow");
});
</script>
Syntax: $("p:first"); selects the first <p> element
The :first selector selects the first element.
This selector can only select one single element. Use the :first-child selector to select more than one element (one for each parent).
This is mostly used together with another selector to select the first element in a group.
Tip: to select the last element in a group, use the :last selector.
This is the first paragraph.
This is the second paragraph.
This is the last paragraph.
<div id="divG">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#divG p:first").css("background-color", "yellow");
});
</script>
Syntax: $("p:last"); selects the last <p> element
The :last selector selects the last element. This selector can only select one single element. Use the :last-child selector to select more than one element (one for each parent).
This is mostly used together with another selector to select the last element in a group (like in the example above).
Tip: to select the first element in a group, use the :first selector.
This is the first paragraph.
This is the second paragraph.
This is the last paragraph.
<div id="divH">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#divH p:last").css("background-color", "pink");
});
</script>
Syntax: $("tr:even"); selects all even <tr> elements
The :even selector selects each element with an even index number (like: 0, 2, 4, etc.). The index numbers start at 0.
This is mostly used together with another selector to select every even indexed element in a group.
Tip: Use the :odd selector to select elements with odd index numbers.
| Company | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbköp | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
| Island Trading | UK |
<div id="divI">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$("#divI tr:even").css("background-color", "burlywood");
});
</script>
Syntax:$("tr:odd"); selects all odd <tr> elements
The :odd selector selects each element with an odd index number (like: 1, 3, 5, etc.).The index numbers start at 0.
This is mostly used together with another selector to select every odd indexed element in a group (like in the example above).
Tip: Use the :even selector to select elements with even index numbers.
| Company | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbköp | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
| Island Trading | UK |
<div id="divI">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$("divJ tr:odd").css("background-color", "burlywood");
});
</script>
Syntax: $("p:first-child"); selects all <p> elements that are the first child of their parent
The :first-child selector selects all elements that are the first child of their parent.
Tip: use the :last-child selector to select elements that are the last child of their parent.
The first paragraph in divK.
The first paragraph in div.
The last paragraph in div.
The first paragraph in another div.
The last paragraph in another div.
The last paragraph in divK.
<div id="divK">
<p>The first paragraph in divK.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in divK.</p>
</div>
<script>
$(document).ready(function(){
$("#divK p:first-child").css("background-color", "yellow");
});
</script>
Syntax: $("p:first-of-type"); selects all <p> elements that are the first <p> element of their parent
The :first-of-type selector selects all elements that are the first child, of a particular type, of their parent.
Tip: This is the same as :nth-of-type(1).
Tip: Use the :last-of-type selector to select all elements that are the last child, of a particular type, of their parent.
The first paragraph in divL.
The first paragraph in div.
The last paragraph in div.
The first paragraph in another div.
The last paragraph in another div.
The last paragraph in divL.
<div id="divL">
<p>The first paragraph in divL.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in divL.</p>
</div>
<script>
$(document).ready(function(){
$("#divL p:first-of-type").css("background-color", "yellow");
});
</script>
Syntax: $("p:last-child"); selects all <p> elements that are the last child of their parent
The :last-child selector selects all elements that are the last child of their parent.
Tip: Use the :first-child selector to select elements that are the first child of their parent.
The first paragraph in divM.
The first paragraph in div.
The last paragraph in div.
The first paragraph in another div.
The last paragraph in another div.
This is a span element.The last paragraph in divM.
<div id="divM">
<p>The first paragraph in divM.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>
<p>The last paragraph in divM.</p>
</div>
<script>
$(document).ready(function(){
$("#divM p:last-child").css("background-color", "skyblue");
});
</script>
Syntax: $("p:last-of-type"); selects all <p> elements that are the last <p> element of their parent
The :last-of-type selector selects all elements that are the last child, of a particular type, of their parent.
Tip: this is the same as :nth-last-of-type(1).
tip: Use the :first-of-type selector to select all elements that are the first child, of a particular type, of their parent.
The first paragraph in divN.
The first paragraph in div.
The last paragraph in div.
The first paragraph in another div.
The last paragraph in another div.
This is a span element.The last paragraph in divN.
<div id="divL">
<p>The first paragraph in divN.</p>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in divN.</p>
</div>
<script>
$(document).ready(function(){
$("#divL p:first-of-type").css("background-color", "yellow");
});
</script>
Syntax: $("p:nth-child(2)"); selects all <p> elements that are the 2nd child of their parent
The :nth-child(n) selector selects all elements that are the nth child, regardlessof of type, of their parent.
Tip: use the :nth-of-type() selector to select all elements that are the nth child, of a particular type, of their parent.
Parameters:
n : the index of each child to match. Must be a number. The first element has the index number 1.
even : selects each even child element.
odd : selects each odd child element.
formula : specifies which child element(s) to be selected with a formula (an + b). Example: p:nth-child(3n+2) selects each 3rd paragraph, starting at the 2nd child element
The first paragraph in divO.
The second paragraph in divO (and the 3rd child element in divO).
The first paragraph in div.
The second paragraph in another div (and the 3rd child element in this div).
The last paragraph in div.
The first paragraph in another div.
The second paragraph in another div.
The last paragraph in another div (and the 3rd child element in this div).
The last paragraph in divO.
<div id="divO">
<h4>This is a heading in divO</h4>
<p>The first paragraph in divO.</p>
<p>The second paragraph in divO (and the 3rd child element in divO).</p>
<div style="border:1px solid;">
<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in another div (and the 3rd child element in this div).</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in another div (and the 3rd child element in this div).</p>
</div>
<p>The last paragraph in divO.</p>
</div>
<script>
$(document).ready(function(){
$("#divO p:nth-child(3)").css("background-color", "magenta");
});
</script>
Syntax: $("p:nth-last-child(2)"); selects all <p> elements that are the 2nd child of their parent, counting from the last child
The :nth-last-child(n) selector selects all elements that are the nth child, regardless of type, of their parent, counting from the last child.
Tip: Use the :nth-last-of-type() selector to select all elements that are the nth child, of a particular type, of their parent, counting from the last child.
Parameters:
n : the index of each child to match. Must be a number. The first element has the index number 1.
even : selects each even child element.
odd : selects each odd child element.
formula : specifies which child element(s) to be selected with a formula (an + b). Example: p:nth-last-child(3n+2) selects each 3rd paragraph, starting at the last 2nd child element
The first paragraph in divP.
The second paragraph in divP (and the 3rd child element in divP).
The first paragraph in div.
The second paragraph in another div (and the 3rd child element in this div).
The last paragraph in div.
The first paragraph in another div.
The second paragraph in another div.
The last paragraph in another div (and the 3rd child element in this div).
The last paragraph in divP.
<div id="divP">
<h4>This is a heading in divP</h4>
<p>The first paragraph in divP.</p>
<p>The second paragraph in divP (and the 3rd child element in divP).</p>
<div style="border:1px solid;">
<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in another div (and the 3rd child element in this div).</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in another div (and the 3rd child element in this div).</p>
</div>
<p>The last paragraph in divP.</p>
</div>
<script>
$(document).ready(function(){
$("#divP p:nth-last-child(3)").css("background-color", "yellow");
});
</script>
Syntax: $("p:nth-of-type(2)"); selects all <p> elements that are the 2nd <p> element of their parent
The :nth-of-type(n) selector selects all elements that are the nth child, of a particular type, of their parent.
Tip: use the :nth-child() selector to select all elements that are the nth child, regardless of type, of their parent.
Parameters:
n : the index of each child to match. Must be a number. The first element has the index number 1.
even : selects each even child element.
odd : selects each odd child element.
formula : specifies which child element(s) to be selected with a formula (an + b). Example: p:nth-of-type(3n+2) selects each 3rd paragraph, starting at the 2nd paragraph
The first paragraph in divQ.
The second paragraph in divQ (and the 3rd child element in divQ).
The first paragraph in div.
The second paragraph in another div.
The last (THIRD) paragraph in div.
The first paragraph in another div.
The second paragraph in another div.
The last (third) paragraph in another div.
The last paragraph in divQ.
<div id="divQ">
<h4>This is a heading in divQ</h4>
<p>The first paragraph in divQ.</p>
<p>The second paragraph in divQ (and the 3rd child element in divQ).</p>
<div style="border:1px solid;">
<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in another div.</p>
<p>The last (THIRD) paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The second paragraph in another div.</p>
<p>The last (third) paragraph in another div.</p>
</div>
<p>The last paragraph in divQ.</p>
</div>
<script>
$(document).ready(function(){
$("#divQ p:nth-of-type(3)").css("background-color", "aquamarine");
});
</script>
Syntax: $("p:nth-last-of-type(2)"); selects all <p> elements that are the 2nd <p> element of their parent, counting from the last child
The :nth-last-of-type(n) selector selects all elements that are the nth child, of a particular type, of their parent, counting from the last child.
Tip: use the :nth-last-child() selector to select all elements that are the nth child, regardless of type, of their parent, counting from the last child.
Parameters:
n : the index of each child to match. Must be a number. The first element has the index number 1.
even : selects each even child element.
odd : selects each odd child element.
formula : specifies which child element(s) to be selected with a formula (an + b). Example: p:nth-last-of-type(3n+2) selects each 3rd paragraph, starting at the 2nd paragraph
The first paragraph in divR (and the 3rd paragraph in divR, counting from the last child).
The second paragraph in divQ.
The first paragraph in div (and the 3rd paragraph in div, counting from the last child).
The second paragraph in another div.
The last paragraph in div.
The first paragraph in another div (and the 3rd paragraph, counting from the last child).
The second paragraph in another div.
The last (third) paragraph in another div.
The last paragraph in divR.
<div id="divR">
<h4>This is a heading in divR</h4>
<p>The first paragraph in divR (and the 3rd paragraph in divR, counting from the last child).</p>
<p>The second paragraph in divQ.</p>
<div style="border:1px solid;">
<span>This is a span element in div</span>
<p>The first paragraph in div (and the 3rd paragraph in div, counting from the last child).</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div (and the 3rd paragraph, counting from the last child).</p>
<p>The second paragraph in another div.</p>
<p>The last (third) paragraph in another div.</p>
</div>
<p>The last paragraph in divR.</p>
</div>
<script>
$(document).ready(function(){
$("#divR p:nth-last-of-type(3)").css("background-color", "skyblue");
});
</script>
Syntax: $("p:only-child"); selects all <p> elements that are the only child of their parent
The :only-child selector selects every element that is the only child of its parent.
The first child.
The last child.
The only child.
The last child.
<div id="divS">
<div style="border:1px solid;">
<p>The first child.</p>
<p>The last child.</p>
</div><br>
<div style="border:1px solid;">
<p>The only child.</p>
</div><br>
<div style="border:1px solid;">
<span>The first child.</span>
<p>The last child.</p>
</div><br>
</div>
<script>
$(document).ready(function(){
$("#divS p:only-child").css("background-color", "yellow");
});
</script>
Syntax: $("p:only-of-type"); selects all <p> elements that are the only child, of its type, of their parent
The :only-of-type selector. selects every element that is the only child of its type, of its parent.
The first paragraph.
The last paragraph.
The only paragraph.
The only paragraph.
<div id="divT">
<div style="border:1px solid;">
<p>The first paragraph.</p>
<p>The last paragraph.</p>
</div><br>
<div style="border:1px solid;">
<p>The only paragraph.</p>
</div><br>
<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The only paragraph.</p>
</div><br>
</div>
<script>
$(document).ready(function(){
$("#divT p:only-of-type").css("background-color", "yellow");
});
</script>
Syntax: $("div > p"); selects all <p> elements that are a direct child of a <div> element
The ("parent > child") selector selects all elements that are a direct child of the specified element.
Parameters:
parent : required. Specifies the parent element to be selected.
child :required. Specifies the direct child element (of the specified parent element) to be selected
This is a paragraph.
This is a text inside a span.This is a paragraph. This is a span element, inside the paragraph.
<div id="divU">
<h4>What will $("div > span") select?</h4>
<h5>This div element has two direct child elements, p and span:</h5>
<div style="border:0.1vw solid black;padding:1vw;">
<p>This is a paragraph.</p>
<span>This is a text inside a span.</span>
</div>
<h5>This div element has one direct child element, p:</h5>
<div style="border:0.1vw solid black;padding:1vw;">
<p>This is a paragraph. <span>This is a span element, inside the paragraph.</span></p>
</div>
</div>
<script>
$(document).ready(function(){
$("#divU div > span").css("background-color", "yellow");
});
</script>
Syntax: $("div p"); selects all <p> elements that are descendants of a <div> element
The ("parent descendant") selector selects all elements that are descendants of a specified element. A descendant of an element could be a child, grandchild, great-grandchild, etc, of that element.
Parameters:
parent : required. Specifies the parent element to be selected.
descendant :required. Specifies the descendant element (of the specified parent element) to be selected
This is a paragraph.
This is a text inside a span.This is a paragraph. This is a span element, inside the paragraph.
<div id="divV">
<h4>What will $("div span") select?</h4>
<h5>This div element has two descendants, p and span:</h5>
<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph.</p>
<span>This is a text inside a span.</span>
</div>
<h5>This div element has also two descendants, p and span:</h5>
<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph. <span>This is a span element, inside the paragraph.</span></p>
</div>
</div>
<script>
$(document).ready(function(){
$("#divV div span").css("background-color", "lightblue");
});
</script>
Syntax: $("div + p"); selects the <p> element that are next to each <div> elements
The ("element + next") selector selects the "next"
Example: If you have two <p> elements right after a <iv> element, this syntax:$("div + p") will only select the first <p> element, because it is the next element of the <y;div> element (the other <p> element will be ignored).
Example: If you have an <h2> element right after a <div> element, and then a <p> element, this syntax $("div + p") will not select the <p> element, because the next element of the <div> element is the <h2> element
Note: Both of the specified elements must share the same parent.
Parameters:
element : required. Any valid jQuery selector.
next :required. Specifies the element that should be the next element of the "element" parameter.
This p element is next to a div element.
This is another p element.
This is a p element inside a div element.
This is a p element (This p element will not be selected, because the h2 element above is the "next" element of the div element).
<div id="divW">
<h4>What will $("div + p") select?</h4>
<div style="border:1px solid black;padding:10px;">This is a div element.</div>
<p>This p element is next to a div element.</p>
<p>This is another p element.</p>
<div style="border:1px solid black;padding:10px;">
<p>This is a p element inside a div element.</p>
</div>
<h5>This is a heading next to a div element.</h5>
<p>This is a p element (This p element will not be selected, because the h2 element above is the "next" element of the div element).</p>
</div>
<script>
$(document).ready(function(){
$("#divW div + p").css("background-color", "azure");
});
</script>
Syntax: $("div ~ p"); selects all <p> elements that appear after the <div> element
The ("element ~ siblings") selector selects sibling elements that appear after the specified "element".
Note: Both of the specified elements must share the same parent.
Parameters:
element : required. Any valid jQuery selector.
siblings :required. Specifies the siblings of the "element" parameter.
This is a p element (will not be selected).
This is a p element.
This is another p element.
This is a p element inside a div element (will not be selected).
This is a p element.
<div id="divX">
<h4>What will $("div ~ p") select?</h4>
<p>This is a p element (will not be selected).</p>
<div style="border:1px solid black;padding:10px;">This is a div element.</div>
<p>This is a p element.</p>
<p>This is another p element.</p>
<div style="border:1px solid black;padding:10px;">
<p>This is a p element inside a div element (will not be selected).</p>
</div>
<h5>This is a heading</h5>
<p>This is a p element.</p>
</div>
<script>
$(document).ready(function(){
$("#divX div ~ p").css("background-color", "white");
});
</script>
Syntax: $("ul li:eq(3)"); selects the fourth element in a list (index starts at 0)
The :eq() selector selects an element with a specific index number. The index numbers start at 0, so the first element will have the index number 0 (not 1). This is mostly used together with another selector to select a specifically indexed element in a group.
Parameters:
index : required. Specifies the index of the element.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divY">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divY p:eq(1)").css("background-color","yellow");
});
</script>
Syntax: $("ul li:gt(3)"); selects list elements with an index greater than 3
The :gt() selector selects elements with an index number higher than a specified number. The index numbers start at 0. This is mostly used together with another selector to select the last elements in a group.
Tip: use the :lt selector to select elements index numbers lesser than the specified number.
Parameters:
index : required. Specifies which element to select. Elements with an index higher than the specified number is selected.
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
<div id="divZ">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$("#divZ tr:gt(3)").css("background-color", "yellow");
});
</script>
Syntax: $("ul li:lt(3)"); selects list elements with an index less than 3
The :lt() selector selects elements with an index number less than a specified number. The index numbers start at 0. This is mostly used together with another selector to select the first elements in a group.
Tip: use the :gt selector to select elements index numbers greater than the specified number.
Parameters:
index : required. Specifies which element to select. Elements with an index lesser than the specified number is selected.
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
<div id="divAA">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$("#divAA tr:lt(4)").css("background-color", "darkgrey");
});
</script>
Syntax: $("input:not(:empty)"); selects all input elements that are not empty
The :not() selector selects all elements except the specified element. This is mostly used together with another selector to select everything except the specified element in a group.
Parameters:
selector : required. . Specifies the element to not select. This parameter accepts any kind of selector.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAB">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAB p:not(.intro)").css("background-color", "aquamarine");
});
</script>
Syntax: $(":header"); selects all header elements <h1>, <h2> ...
The :header selector selects all header elements (<h1> to <h6>).
example:
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAC">
<h4>Welcome to My Homepage</h4>
<h5>My Fantastic Homepage</h5>
<h6>It's amazing!</h6>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAC :header").css("background-color", "silver");
});
</script>
Syntax: $(":animated"); selects all animated elements
The :animated selector selects all elements that are currently animated.
<div id="divAD">
<button class="btn1">Change color of the animated element</button><br><br>
<div style="background:blue;">Div 1</div>
<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>
</div>
<script>
$(document).ready(function(){
function aniDiv(){
$("#divAD div:eq(0)").animate({width: "50%"}, "slow");
$("#divAD div:eq(0)").animate({width: "100%"}, "slow", aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$("#divAD :animated").css("background-color", "red");
});
});
</script>
Syntax: $(":focus"); selects the element that currently has focus
The :focus selector selects the element that currently has focus.
Tip: this selector is often used with a tag name or another selector. If not, this selector will be the same as ("*:focus").
<div id="divAE">
<input type="text" />
</div>
<script>
$(document).ready(function(){
$("#divAE input").focus();
$("#divAE :focus").css("background-color", "yellow");
});
</script>
Syntax: $(":contains('Hello')"); selects all elements which contains the text "Hello"
The :contains() selector selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element.
This is mostly used together with another selector to select the elements containing the text in a group.
Note: The text is case sensitive.
Parameters:
text : required. Specifies the text to find.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAF">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAF p:contains(is)").css("background-color", "yellow");
});
</script>
Syntax: $("div:has(p)"); selects all <div> elements that have a <p> element
The :has() selector selects all elements that have one or more elements inside of them, that matches the specified selector.
Tip: to select an element that have multiple elements inside of it, use comma.
Parameters:
selector : required. Specifies the element to select. This parameter accepts any kind of selector
This is a span element inside a p element.
This is a p element with no span element.
<div id="divAG">
<p><span>This is a span element inside a p element.</span></p>
<p>This is a p element with no span element.</p>
</div>
<script>
$(document).ready(function(){
$("#divAG p:has(span)").css("border", "solid red");
});
</script>
Syntax: $(":empty"); selects all elements that are empty
The :empty selector selects empty elements. An empty element is an element without child elements or text.
| Company | Country | |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | |
| Berglunds snabbköp | Sweden | |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Austria | |
| UK | ||
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
<div id="divAH">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th></th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td></td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td></td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$("#divAH :empty").css("background-color", "yellow");
});
</script>
Syntax: $(":parent"); selects all elements that are a parent of another element
The :parent selector selects all elements that are the parent of another element, including text nodes.
| Company | Country | |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | |
| Berglunds snabbköp | Sweden | |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Austria | |
| UK | ||
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
Try to write something in a td element that is empty. It will now be selected.
<div id="divAI">
<h4>Welcome to My Web Page</h4>
<table border="1">
<tr>
<th>Company</th>
<th></th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td></td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td></td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
<p>Try to write something in a td element that is empty. It will now be selected.</p>
</div>
<script>
$(document).ready(function(){
$("#divAI td:parent").css("background-color", "magenta");
});
</script>
Syntax: $("p:hidden"); selects all hidden <p> elements
The :hidden selector selects hidden elements. Hidden elements are elements that are:
Set to display:none
Form elements with type="hidden"
Width and height set to 0
A hidden parent element (this also hides child elements)
Note: This selector will not work on elements with visibility:hidden.
This is a paragraph.
This is another paragraph.
<div id="divAJ">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p style="display:none;">This is a hidden paragraph that is slowly shown.</p>
</div>
<script>
$(document).ready(function(){
$("#divAJ p:hidden").show(3500);
});
</script>
Syntax: $("table:visible"); selects all visible tables
The :visible selector selects every element that is currently visible. Visible elements are elements that are not:
Set to display:none
Form elements with type="hidden"
Width and height set to 0
A hidden parent element (this also hides child elements)
This is a paragraph.
This is another paragraph.
<div id="divAK">
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p style="display:none;">This is a hidden paragraph that is slowly shown.</p>
</div>
<script>
$(document).ready(function(){
$("#divAK p:visible").css("background-color", "yellow");
});
</script>
Syntax: $(":root"); selects the document's root element
The :root selector selects the document's root element. In HTML, the root element is always the <html> element.
<div>
<h4>This is a heading</h4>
</div>
<script>
$(document).ready(function(){
$(":root").css("background-color", "yellow");
});
</script>
Syntax: $("p:lang(de)"); selects all <p> elements with a lang attribute value starting with "de"
The :lang() selector selects all elements with the language attribute starting with a specified value.
Note: the value has to be a whole word, either alone, like lang="en", or followed by a hyphen( - ), like lang="en-us".
I live in Italy.
Ciao bella!
<div id="divAM">
<p>I live in Italy.</p>
<p lang="it">Ciao bella!</p>
</div>
<script>
$(document).ready(function(){
$("#divAM p:lang(it)").css("background-color", "skyblue");
});
</script>
Syntax: $("[href]"); selects all elements with a href attribute
The [attribute] selector selects each element with the specified attribute.
Parameters:
attribute : required. Specifies the attribute to find.
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAN">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAN [id]").css("background-color", "yellow");
});
</script>
Syntax: $("[href='default.htm']"); selects all elements with a href attribute value equal to "default.htm"
The [attribute=value] selector selects each element with the specified attribute and value.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the value to find
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAO">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAO [id=choose]").css("background-color", "burlywood");
});
</script>
Syntax: $("[href!='default.htm']"); selects all elements with a href attribute value not equal to "default.htm"
The [attribute!=value] selector selects each element that does NOT have the specified attribute and value. Elements with the selected attribute, but with a different value, will be selected.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the value to find
My name is Donald.
I live in Duckburg.
My best friend is Mickey.
Who is your favourite:
<div id="divAP">
<h4>Welcome to My Homepage</h4>
<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#divAP p[class!='intro']").css("background-color", "yellow");
});
</script>
Syntax: $("[href$='.jpg']"); selects all elements with a href attribute value ending with ".jpg"
The [attribute$=value] selector selects each element with a specific attribute, with a value ending in a specific string.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the string the value should end with.
<div id="divAQ">
<a href="https://www.lwitters.com">my website</a><br>
<a href="http://www.google.com">Google.com</a><br>
<a href="http://www.wikipedia.org">wikipedia.org</a>
</div>
<script>
$(document).ready(function(){
$("#divAQ a[href$='.org']").css("background-color", "pink");
});
</script>
Syntax: $("[title|='Tomorrow']"); selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
The [attribute|=value] selector selects each element with a specified attribute, with a value equal to a specified string (like "en") or starting with that string followed by a hyphen (like "en-us").
Tip: this selector is often used to handle language attributes.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the string the attribute value should start with.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This selector selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen.
<div id="divAR">
<p title="Tomorrow">This is a paragraph.</p>
<p title="tomorrow">This is a paragraph.</p>
<p title="Tom">This is a paragraph.</p>
<p title="See You Tomorrow">This is a paragraph.</p>
<p title="Tomorrow-the day after today">This is a paragraph.</p>
<p>This selector selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen.</p>
</div>
<script>
$(document).ready(function(){
$("#divAR p[title|='Tomorrow']").css("background-color", "azure");});
</script>
Syntax: $("[title^='Tom']"); selects all elements with a title attribute value starting with "Tom"
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the string the value should begin with.
This selector selects all input fields with the attribute name that starts with 'nation'.
<div id="divAS">
<input name="nationality" type="text" value="Chinese">
<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that starts with 'nation'.</p>
</div>
<script>
$(document).ready(function(){
$("#divAS input[name^='nation']").css("background-color", "yellow");});
</script>
</pre>
Syntax: $("[title~='hello']"); selects all elements with a title attribute value containing the specific word "hello"
The [attribute^=value] selector selects each element with a specific attribute, with a value beginning in a specific string.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the string value.
This selector selects all input fields with the attribute name that contains the specific string 'nation'.
Note: It will only select the attribute name that contains the specific string "nation", and not the attribute name that starts, includes or ends with "nation" (like "nationality", "xnationx" or "anothernation").
<div id="divAT">
<input name="nationality" type="text" value="Chinese">
<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the specific string 'nation'.</p>
<p><b>Note</b>: It will only select the attribute name that contains the specific string "nation",
and not the attribute name that starts, includes or ends with "nation" (like "nationality", "xnationx" or "anothernation").
</div>
<script>
$(document).ready(function(){
$("#divAT input[name~='nation']").css("background-color", "yellow");});
</script>
Syntax: $("[title*='hello']"); selects all elements with a title attribute value containing the word "hello"
The [attribute*=value] selector selects each element with a specific attribute, with a value containing a string.
Parameters:
attribute : required. Specifies the attribute to find.
value : required. Specifies the string value.
This selector selects all input fields with the attribute name that contains the string 'nation'.
<div id="divAU">
<input name="nationality" type="text" value="Chinese">
<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>
</div>
<script>
$(document).ready(function(){
$("#divAU input[name*='nation']").css("background-color", "pink");});
</script>
Syntax: $(":input"); selects all input elements
The :input selector selects form elements. This selector also works with the button element.
<div id="divAV">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){$("#divAV :input").css("background-color", "skyblue");});
</script>
Syntax: $(":text"); selects all input elements with type="text"
The :text selector selects input elements with type=text.
<div id="divAW">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){$("#divAW :text").css("background-color", "skyblue");});
</script>
Syntax: $(":password"); selects all input elements with type="password"
The :password selector selects input elements with type=password.
<div id="divAX">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){$("#divAX :password").css("background-color", "skyblue");});
</script>
Syntax: $(":radio"); selects all input elements with type="radio"
The :radio selector selects input elements with type=radio.
Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does not support background color on radiobuttons.
<div id="divAY">
<form action="">
Name: <input type="text" name="user"><br>
Male:<input type="radio" name="sex" value="m"><br>
Female<input type="radio" name="sex" value="f"><br>
<input type="submit">
</form>
<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does
not support background color on radiobuttons.</p>
</div>
<script>
$(document).ready(function(){
$("#divAY :radio").wrap("<span style='background-color:red'>");
});
</script>
Syntax: $(":checkbox"); selects all input elements with type="checkbox"
The :checkbox selector selects input elements with type=checkbox.
Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does not support background color on checkboxes.
<div id="divAZ">
<form action="">
Name: <input type="text" name="user"><br>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
I have a car: <input type="checkbox" name="vehicle" value="Car"><br>
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
<input type="submit">
</form>
<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does
not support background color on checkboxes.</p>
</div>
<script>
$(document).ready(function(){
$("#divAZ :checkbox").wrap("<span style='background-color:green'>");
});
</script>
Syntax: $(":submit"); selects all input elements with type="submit"
The :submit selector selects button and input elements with type=submit. If a button element has no defined type, most browsers will use it as a button with type=submit.
Tip: using input:submit as a selector will not select the button element.
<div id="divAAA">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAA :submit").css("background-color", "lightblue");
});
</script>
Syntax: $(":reset"); selects all input elements with type="reset"
The :reset selector selects button and input elements with type=reset.
Tip: using input:reset as a selector will not select the button element.
<div id="divAAB">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAB :reset").css("background-color", "lightblue");
});
</script>
Syntax: $(":button"); selects: all input elements with type="button"
The :button selector selects button elements, and input elements with type=button.
Tip: using input:button as a selector will not select the button element.
<div id="divAAC">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAC :button").css("background-color", "darkgrey");
});
</script>
Syntax: $(":image"); selects all input elements with type="image"
The :image selector selects input elements with type=image.
<div id="AAD">
<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
Compatible: <input type="image" src="../../pics/submit.gif" width="30" height="30">
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAD :image").css("background-color", "red");
});
</script>
Syntax: $(":file"); selects all input elements with type="file"
The :file selector selects input elements with type=file.
<div id="divAAE">
<form action="">
Name: <input type="text" name="user"><br>
File: <input type="file" name="myfile">
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAE :file").css("background-color", "red");
});
</script>
Syntax: $(":enabled"); selects all enabled input elements
The :enabled selector selects all enabled form elements.
<div id="divAAF">
<form action="">
Name: <input type="text" name="user"><br>
ID:<input type="text" name="id" disabled="disabled">
Age:
<select disabled="disabled">
<option>20-30</option>
<option>30-50</option>
<option>50+</option>
</select>
<input type="submit">
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAF :enabled").css("background-color","orange");});
</script>
Syntax: $(":disabled"); selects all disabled input elements
The :disabled selector selects all disabled form elements.
<div id="divAAG">
<form action="">
Name: <input type="text" name="user"><br>
ID:<input type="text" name="id" disabled="disabled">
Age:
<select disabled="disabled">
<option>20-30</option>
<option>30-50</option>
<option>50+</option>
</select>
<input type="submit">
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAG :disabled").css("background-color","orange");});
</script>
Syntax: $(":selected"); selects all selected input elements
The :selected selector selects option elements that are pre-selected.
Note: this selector will not work on checkboxes or radio buttons. Use the :checked selector instead.
<div id="divAAH">
<form action="">
Name: <input type="text" name="user"><br>
Car:
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</form>
</div>
<script>
$(document).ready(function(){
$("#divAAH :selected").css("background-color", "red");
});
</script>
Syntax: $(":checked"); selects all checked input elements
The :checked selector selects all checked checkboxes or radio buttons.
Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does not support background color on checkboxes.
<div id="divAAI">
<form action="">
Name: <input type="text" name="user"><br>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
I have a car: <input type="checkbox" name="vehicle" value="Car" checked="checked"><br>
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
<input type="submit">
</form>
<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does not support background color on checkboxes.</p>
</div>
<script>
$(document).ready(function(){
$("#divAAI :checked").wrap("<span style='background-color:pink'>");
});
</script>